<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>信息图表型简历模板</title>
  <style>
    /* 基础样式 */
    :root {
      --primary-color: #3498db;
      --secondary-color: #2ecc71;
      --accent-color: #e74c3c;
      --dark-color: #34495e;
      --light-color: #ecf0f1;
      --text-color: #333;
      --text-light: #7f8c8d;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    }
    
    body {
      background-color: #f9f9f9;
      color: var(--text-color);
      line-height: 1.6;
    }
    
    .container {
      max-width: 1000px;
      margin: 30px auto;
      background-color: white;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
      position: relative;
      overflow: hidden;
    }
    
    /* 头部样式 */
    header {
      padding: 40px;
      background: linear-gradient(135deg, var(--primary-color) 0%, var(--dark-color) 100%);
      color: white;
      text-align: center;
      position: relative;
    }
    
    .name {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 5px;
    }
    
    .title {
      font-size: 1.2rem;
      font-weight: 300;
      margin-bottom: 20px;
      color: rgba(255, 255, 255, 0.9);
    }
    
    .contact-info {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 20px;
      margin-top: 20px;
    }
    
    .contact-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    /* 主要内容样式 */
    main {
      padding: 40px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
    }
    
    @media (max-width: 768px) {
      main {
        grid-template-columns: 1fr;
      }
    }
    
    .section {
      margin-bottom: 30px;
    }
    
    .section-title {
      font-size: 1.3rem;
      color: var(--dark-color);
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 2px solid var(--light-color);
      position: relative;
    }
    
    .section-title::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 60px;
      height: 2px;
      background-color: var(--primary-color);
    }
    
    /* 图表样式 */
    .chart-container {
      margin-bottom: 30px;
    }
    
    .skills-chart {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    
    .skill-item {
      margin-bottom: 5px;
    }
    
    .skill-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
    }
    
    .skill-name {
      font-weight: 600;
    }
    
    .skill-percentage {
      color: var(--text-light);
    }
    
    .skill-bar {
      height: 10px;
      background-color: var(--light-color);
      border-radius: 5px;
      overflow: hidden;
    }
    
    .skill-progress {
      height: 100%;
      border-radius: 5px;
    }
    
    .skill-progress.html {
      width: 90%;
      background-color: var(--primary-color);
    }
    
    .skill-progress.css {
      width: 85%;
      background-color: var(--secondary-color);
    }
    
    .skill-progress.js {
      width: 75%;
      background-color: var(--accent-color);
    }
    
    .skill-progress.design {
      width: 80%;
      background-color: #9b59b6;
    }
    
    .skill-progress.communication {
      width: 95%;
      background-color: #f1c40f;
    }
    
    /* 饼图样式 */
    .pie-chart-container {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }
    
    .pie-chart {
      position: relative;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: conic-gradient(
        var(--primary-color) 0% 70%,
        var(--light-color) 70% 100%
      );
      margin-bottom: 15px;
    }
    
    .pie-chart::before {
      content: "70%";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 1.2rem;
      font-weight: bold;
      color: var(--dark-color);
    }
    
    .pie-chart-inner {
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      bottom: 10px;
      background-color: white;
      border-radius: 50%;
    }
    
    .pie-chart-label {
      text-align: center;
      font-weight: 600;
      color: var(--dark-color);
    }
    
    /* 时间轴样式 */
    .timeline {
      position: relative;
      padding-left: 30px;
    }
    
    .timeline::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 2px;
      background-color: var(--light-color);
    }
    
    .timeline-item {
      position: relative;
      margin-bottom: 30px;
    }
    
    .timeline-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: -30px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: var(--primary-color);
      border: 3px solid white;
    }
    
    .timeline-date {
      font-size: 0.9rem;
      color: var(--text-light);
      margin-bottom: 5px;
    }
    
    .timeline-title {
      font-weight: 600;
      font-size: 1.1rem;
      margin-bottom: 5px;
      color: var(--dark-color);
    }
    
    .timeline-subtitle {
      font-size: 1rem;
      color: var(--primary-color);
      margin-bottom: 10px;
    }
    
    /* 项目经验图表 */
    .projects-chart {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      justify-content: space-between;
    }
    
    .project-card {
      flex: 1 0 calc(50% - 15px);
      min-width: 200px;
      background-color: var(--light-color);
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s, box-shadow 0.3s;
    }
    
    .project-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    }
    
    .project-title {
      font-weight: 600;
      margin-bottom: 10px;
      color: var(--dark-color);
    }
    
    .project-description {
      font-size: 0.9rem;
      margin-bottom: 10px;
    }
    
    .project-tech {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    
    .tech-tag {
      font-size: 0.8rem;
      padding: 3px 8px;
      background-color: white;
      border-radius: 12px;
      color: var(--dark-color);
    }
    
    /* 打印样式 */
    @media print {
      body {
        background-color: white;
      }
      
      .container {
        box-shadow: none;
        margin: 0;
        max-width: 100%;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1 class="name">张三</h1>
      <p class="title">数据可视化专家 | UI/UX设计师</p>
      <div class="contact-info">
        <div class="contact-item">
          <span>📧</span>
          <span>zhangsan@example.com</span>
        </div>
        <div class="contact-item">
          <span>📱</span>
          <span>13812345678</span>
        </div>
        <div class="contact-item">
          <span>📍</span>
          <span>上海市浦东新区</span>
        </div>
        <div class="contact-item">
          <span>🔗</span>
          <span>portfolio.example.com</span>
        </div>
      </div>
    </header>
    
    <main>
      <div class="left-column">
        <section class="section">
          <h2 class="section-title">专业技能</h2>
          <div class="chart-container">
            <div class="skills-chart">
              <div class="skill-item">
                <div class="skill-info">
                  <span class="skill-name">HTML/CSS</span>
                  <span class="skill-percentage">90%</span>
                </div>
                <div class="skill-bar">
                  <div class="skill-progress html"></div>
                </div>
              </div>
              
              <div class="skill-item">
                <div class="skill-info">
                  <span class="skill-name">JavaScript</span>
                  <span class="skill-percentage">75%</span>
                </div>
                <div class="skill-bar">
                  <div class="skill-progress js"></div>
                </div>
              </div>
              
              <div class="skill-item">
                <div class="skill-info">
                  <span class="skill-name">UI/UX设计</span>
                  <span class="skill-percentage">80%</span>
                </div>
                <div class="skill-bar">
                  <div class="skill-progress design"></div>
                </div>
              </div>
              
              <div class="skill-item">
                <div class="skill-info">
                  <span class="skill-name">沟通能力</span>
                  <span class="skill-percentage">95%</span>
                </div>
                <div class="skill-bar">
                  <div class="skill-progress communication"></div>
                </div>
              </div>
            </div>
          </div>
        </section>
        
        <section class="section">
          <h2 class="section-title">专业分布</h2>
          <div class="pie-chart-container">
            <div>
              <div class="pie-chart">
                <div class="pie-chart-inner"></div>
              </div>
              <p class="pie-chart-label">前端开发</p>
            </div>
            
            <div>
              <div class="pie-chart" style="background: conic-gradient(var(--secondary-color) 0% 60%, var(--light-color) 60% 100%);">
                <div class="pie-chart-inner"></div>
              </div>
              <p class="pie-chart-label">UI设计</p>
            </div>
            
            <div>
              <div class="pie-chart" style="background: conic-gradient(var(--accent-color) 0% 50%, var(--light-color) 50% 100%);">
                <div class="pie-chart-inner"></div>
              </div>
              <p class="pie-chart-label">数据分析</p>
            </div>
          </div>
        </section>
        
        <section class="section">
          <h2 class="section-title">项目经验</h2>
          <div class="projects-chart">
            <div class="project-card">
              <h3 class="project-title">企业数据可视化平台</h3>
              <p class="project-description">设计并开发了一套企业级数据可视化平台，提高了数据分析效率30%。</p>
              <div class="project-tech">
                <span class="tech-tag">D3.js</span>
                <span class="tech-tag">Vue</span>
                <span class="tech-tag">Echarts</span>
              </div>
            </div>
            
            <div class="project-card">
              <h3 class="project-title">电商销售数据分析</h3>
              <p class="project-description">为电商平台构建了实时销售数据分析系统，帮助提升销售转化率15%。</p>
              <div class="project-tech">
                <span class="tech-tag">React</span>
                <span class="tech-tag">Highcharts</span>
                <span class="tech-tag">Node.js</span>
              </div>
            </div>
            
            <div class="project-card">
              <h3 class="project-title">社交媒体用户行为分析</h3>
              <p class="project-description">开发了社交媒体用户行为分析工具，识别关键用户群体和行为模式。</p>
              <div class="project-tech">
                <span class="tech-tag">Python</span>
                <span class="tech-tag">Tableau</span>
                <span class="tech-tag">R</span>
              </div>
            </div>
            
            <div class="project-card">
              <h3 class="project-title">金融风险评估系统</h3>
              <p class="project-description">设计了金融风险可视化评估系统，帮助客户降低风险评估时间50%。</p>
              <div class="project-tech">
                <span class="tech-tag">Angular</span>
                <span class="tech-tag">D3.js</span>
                <span class="tech-tag">MongoDB</span>
              </div>
            </div>
          </div>
        </section>
      </div>
      
      <div class="right-column">
        <section class="section">
          <h2 class="section-title">个人简介</h2>
          <p style="text-align: justify; margin-bottom: 20px;">
            拥有5年数据可视化和UI/UX设计经验，专注于将复杂数据转化为直观、易理解的可视化图表。擅长前端开发和交互设计，能够创建既美观又实用的用户界面。具有良好的沟通能力和团队协作精神，能够与产品、开发和业务团队高效协作。
          </p>
        </section>
        
        <section class="section">
          <h2 class="section-title">工作经历</h2>
          <div class="timeline">
            <div class="timeline-item">
              <p class="timeline-date">2020年6月 - 至今</p>
              <h3 class="timeline-title">高级数据可视化设计师</h3>
              <p class="timeline-subtitle">阿里巴巴</p>
              <p class="item-description">
                负责企业级数据可视化解决方案的设计和实现，开发了多个大型数据分析平台，提升了数据分析效率和用户体验。
              </p>
            </div>
            
            <div class="timeline-item">
              <p class="timeline-date">2018年3月 - 2020年5月</p>
              <h3 class="timeline-title">UI/UX设计师</h3>
              <p class="timeline-subtitle">腾讯</p>
              <p class="item-description">
                负责产品界面设计和用户体验优化，参与了多个产品从概念到上线的全过程，提升了用户满意度和产品转化率。
              </p>
            </div>
            
            <div class="timeline-item">
              <p class="timeline-date">2016年7月 - 2018年2月</p>
              <h3 class="timeline-title">前端开发工程师</h3>
              <p class="timeline-subtitle">百度</p>
              <p class="item-description">
                负责前端界面开发和交互实现，参与了多个Web应用的开发，积累了丰富的前端开发和数据可视化经验。
              </p>
            </div>
          </div>
        </section>
        
        <section class="section">
          <h2 class="section-title">教育背景</h2>
          <div class="timeline">
            <div class="timeline-item">
              <p class="timeline-date">2013 - 2016</p>
              <h3 class="timeline-title">计算机科学硕士</h3>
              <p class="timeline-subtitle">上海交通大学</p>
              <p class="item-description">
                专业方向：数据可视化与人机交互，GPA 3.8/4.0
              </p>
            </div>
            
            <div class="timeline-item">
              <p class="timeline-date">2009 - 2013</p>
              <h3 class="timeline-title">计算机科学学士</h3>
              <p class="timeline-subtitle">浙江大学</p>
              <p class="item-description">
                专业排名前10%，获得多项奖学金
              </p>
            </div>
          </div>
        </section>
      </div>
    </main>
  </div>
</body>
</html>